<template>
    <el-tree :props="props"  ref="tree" @node-click="handleNodeClick"  :data="taskForm">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <!-- <chooseStatus :taskForm="data.data" style="margin-right: 10px;"></chooseStatus> -->
            <!-- <copyTask adress='#I4B9U2' style="margin-left: 10px"></copyTask> -->
            <div class="task-table-item-content">
                <el-tooltip effect="dark" :content="data.data.name" placement="right">
                    <span class="task-table-item-title">{{data.data.name}}</span>
                </el-tooltip>
            </div>
            <div style="display:flex;margin-right:15px">
                <div v-for="items in data.data.tags" :key="items.tagId" :style="{borderColor:items.color,color:items.color}" class="task_tags">{{items.name}}</div>
            </div>
            <el-tooltip effect="dark" :content="data.data.taskType|taskTypeFilter" placement="right">
                <span class="task-table-item-status">{{data.data.taskType | taskTypeFilter}}</span>
            </el-tooltip>
            <div style="display:flex;width:30%">
                <span class="task-table-item-date" v-if="data.data.startDate&&data.data.endDate">{{data.data.startDate}} - {{data.data.endDate}}</span>
                <span class="task-table-item-date" v-if="data.data.workStartDate&&data.data.workEndDate">{{data.data.workStartDate}} - {{data.data.workEndDate}}</span>
            </div>
            <!-- <span class="task-table-item-overdue" v-if="data.data.status!='00'&&data.data.status!='07'&&data.data.status!='08'&&data.data.status!='10'">{{beOverdue(data.data.endDate)?'逾期'+ beOverdue(data.data.endDate) +'天':''}}</span> -->
            <div class="document-left-tree-iconBox" @click.stop="">
                <el-popover placement="bottom" trigger="click">
                    <div class="popover-content">
                        <div class="popover-content-bottom">
                            <span class="popover-content-top-title"  @click="createdChildren(data)">新建子任务</span>
                            <span class="popover-content-top-title"  @click="delChildren(data)">删除任务</span>
                            <span class="popover-content-top-title"  @click="editChildren(data)">修改任务</span>
                        </div>

                    </div>
                    <i slot="reference" class="document-left-tree-more el-icon-more"></i>
                </el-popover>
            </div>
        </span>
    </el-tree>
</template>

<script>
import chooseStatus from "@/components/chooseStatus";
import copyTask from "@/components/copyTask/index";
import { getTreeData } from "@/api/template";
import utils from "@/utils/utils";
export default {
    data() {
        return {
            // props: {
            //     label: "indexName",
            //     children: [],
            //     isLeaf: "isLeaf",
            // },
            props: {
                 children: 'children',
                 label: 'label'
            },
        };
    },
    props: ["type", "taskForm"],
    components: {
        chooseStatus,
        copyTask,
    },
    filters: {
        taskTypeFilter(data) {
            if (data == "00") {
                return "需求";
            } else if (data == "01") {
                return "设计";
            } else if (data == "02") {
                return "开发";
            } else if (data == "04") {
                return "测试";
            } else if (data == "05") {
                return "缺陷";
            } else if (data == "06") {
                return "其他";
            }
        },
    },
    methods: {
		createdChildren(data){
			this.$emit('createdChildren',data.id)
		},
        editChildren(data){
            this.$emit('editChildren',data)
        },
		delChildren(data){
			this.$emit('delChildren',data.id)
		},
        // 异步树节点点击事件
        handleNodeClick(data) {
            console.log("node", data);
        },
        // 异步树叶子节点懒加载逻辑
        loadNode(node, resolve) {
            console.log(node);
            console.log(resolve);
            console.log("异步树111");
            // 一级节点处理
            if (node.level === 0) {
                // this.requestTree(resolve)
            }
            // 其余节点处理
            if (node.level >= 1) {
                // 注意！把resolve传到你自己的异步中去
                this.getIndex(node, resolve);
            }
        },
        // 异步加载叶子节点数据函数
        getIndex(node, resolve) {
            console.log(node);
            console.log("w我进来子节点");
            var _this = this;
            let level = Number(node.data.data.tempLevel) + 1;
            getTreeData({
                level: level,
                parentId: node.data.id,
            }).then((res) => {
                const { data } = res;
                resolve(data.data);
            });
        },
        // 首次加载一级节点数据函数
        // requestTree(resolve) {}
    },
};
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
}

.task-table-item-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
}

.task-table-item-title {
    cursor: pointer;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #2e405e;
    font-size: 12px;
    margin-right: 10px;
    /* min-width: 52px; */
}

.task-table-item-title:hover {
    color: #1890ff;
}

.task-table-item-tag {
    margin-right: 10px;
}

.task-table-item-status {
    max-width: 52px;
    min-width: 22px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #909aaa;
    margin-right: 10px;
    font-size: 12px;
}

.task-table-item-datebox {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 10px;
    max-width: 160px;
    width: 100%;
    justify-content: flex-end;
}

.task-table-item-date {
    color: #909aaa;
    margin-right: 10px;
    font-size: 12px;
    width: 160px;
    display: block;
    text-align: right;
}

.task-table-item-overdue {
    font-size: 12px;
    color: #ff4949;
    width: 70px;
    margin-right: 10px;
    text-align: right;
}

.task-table-item-member {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 111px;
    height: 20px;
    text-align: right;
}

.task-table-item-member-title {
    width: 86px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
}

.task-table-item-member-title:hover {
    color: #1890ff;
}

.task-table-item-member-logo {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #e47777;
}
.task_tags {
    height: 100%;
    padding: 3px;
    font-size: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    margin-right: 5px;
}
.document-left-tree-iconBox {
    position: absolute;
    right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.popover-content-bottom {
    padding-top: 10px;
}
.popover-content-top-title {
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}
.popover-content-top-title:hover {
    background-color: #f5f6f8;
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}
</style>
